<template>  
    <div class="my-appointment">      
      <div class="appointment-list">
        <a class="item">
          <img src="@/assets/pic5.png" class="store-img" alt="">
          <div class="cons">
            <p class="store-name">天赋系统儿童脑力拓天赋系统儿童脑力拓…</p>        
            <p class="store-address">
              <span>245m</span>
              <span class="address">广州市天河区太古汇商业广场古汇商业广场东…</span>
            </p>
            <div class="time">
              <img src="@/assets/yuyue1.png" alt="">
              <span>2018年11月21日 19:30</span>
            </div>
          </div>
        </a>
        <a class="item">
          <img src="@/assets/pic5.png" class="store-img" alt="">
          <div class="cons">
            <p class="store-name">天赋系统儿童脑力拓天赋系统儿童脑力拓…</p>        
            <p class="store-address">
              <span>245m</span>
              <span class="address">广州市天河区太古汇商业广场古汇商业广场东…</span>
            </p>
            <div class="time">
              <img src="@/assets/yuyue1.png" alt="">
              <span>2018年11月21日 19:30</span>
            </div>
          </div>
        </a>
      </div>
      <div class="appointment-list">
        <p class="title">预约记录</p>
        <a class="item">
          <img src="@/assets/pic5.png" class="store-img" alt="">
          <div class="cons">
            <p class="store-name">天赋系统儿童脑力拓天赋系统儿童脑力拓…</p>        
            <p class="store-address">
              <span>245m</span>
              <span class="address">广州市天河区太古汇商业广场古汇商业广场东…</span>
            </p>
            <div class="time over">
              <img src="@/assets/yuyue2.png" alt="">
              <span>2018年11月21日 19:30</span>
            </div>
          </div>
        </a>
        <a class="item">
          <img src="@/assets/pic5.png" class="store-img" alt="">
          <div class="cons">
            <p class="store-name">天赋系统儿童脑力拓天赋系统儿童脑力拓…</p>        
            <p class="store-address">
              <span>245m</span>
              <span class="address">广州市天河区太古汇商业广场古汇商业广场东…</span>
            </p>
            <div class="time over">
              <img src="@/assets/yuyue2.png" alt="">
              <span>2018年11月21日 19:30</span>
            </div>
          </div>
        </a>
      </div>
    </div>
</template>

<script type="text/javascript">
  export default {
    components: {
    },
    data () {
      return {
        list: ['1'],
      }
    },
    created () {

    },
    methods: {
      onItemClick (index) {
        this.tabIndex = index
      }
    }
  }
</script>

<style lang="stylus" scoped>  
.my-appointment 
  .appointment-list
    &:first-child
      border-bottom 1rem solid #f5f5f5
    .title
      line-height 2.7rem
      font-size 1.8rem
      color #333
      font-weight bold
      padding-left 1.5rem
      padding-top 1.8rem
    .item
      padding 1.5rem
      display flex
      position relative
      .store-img
        width 16rem
        height 12rem
        border-radius .4rem
        margin-right 1.5rem
      .store-name
        font-size 1.6rem
        color #333
        font-weight bold
        line-height 2.7rem
        width calc(100vw - 20.5rem)
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      .store-address
        font-size 1.2rem
        line-height 2.7rem
        color #999
        position relative
        .address
          position absolute
          margin-left 1rem
          padding-left 1rem
          width calc(100vw - 25.7rem)
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          &:after
            position absolute
            left 0
            content ""
            border-left 1px solid #e6e6e6
            height 1rem
            top .85rem
      .time
        position absolute
        bottom 1.5rem
        img
          display inline-block
          vertical-align middle
          width 3.6rem
        span
          display inline-block
          vertical-align middle
          font-size 1.2rem
          font-weight bold
          color #FE9700
      .time.over 
        span
          color #999

</style>